<template>
  <Dialog
    v-model="show"
    title="折扣活动详情"
    width="800px"
    @close="close"
  >
    <div class="overflow-y-auto">
      <div class="detail-info">
        <div class="flex lht-38" v-for="item in formattedData" :key="item.label">
          <div class="text-right w-120 color-666666 flex-shrink-0">
            {{ item.label }}：
          </div>
          <div v-if="item.type === 'status'" class="color-333333">
            <el-tag :type="getStatusType(item.value)">{{ getStatusText(item.value) }}</el-tag>
          </div>
          <div v-else class="color-333333">{{ item.value }}</div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="mt24">
        <div class="text-right w-120 color-666666 mb-3 mb12">活动商品：</div>
        <el-table :data="currentPageData" border height="400">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column label="商品图片" width="100">
            <template #default="{ row }">
              <el-image :src="row.image" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="price" label="商品价格">
            <template #default="{ row }">
              ¥{{ row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="店铺名称" />
          <el-table-column label="折扣价">
            <template #default="{ row }">
              ¥{{ (row.price * props.data.discount / 10).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>

        <div class="mt12 flex_aic_jcc">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="props.data.products?.length || 0"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next"
          />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import Dialog from "@/components/dialog.vue";

const show = defineModel();
const emit = defineEmits(["success"]);

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.data.products?.slice(start, end) || [];
});

const formattedData = computed(() => [
  { label: "活动名称", value: props.data.activityName },
  { label: "店铺名称", value: props.data.shopName },
  { label: "折扣力度", value: props.data.discount + '折' },
  { label: "开始时间", value: props.data.startTime },
  { label: "结束时间", value: props.data.endTime },
  { label: "活动状态", value: props.data.status, type: "status" },
]);

const getStatusType = (status) => {
  const map = {
    1: "warning", // 未开始
    2: "success", // 进行中
    3: "info",    // 已结束
    4: "danger",  // 已取消
  };
  return map[status];
};

const getStatusText = (status) => {
  const map = {
    1: "未开始",
    2: "进行中",
    3: "已结束",
    4: "已取消",
  };
  return map[status];
};

const close = () => {
  show.value = false;
};
</script>

<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
.mt24 {
  margin-top: 24px;
}
.detail-info {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>
